<template>
  <div id="userHome">
    <div class="card-content">
      <h3>我的案件</h3>
      <vxe-table stripe :data="caseData" style="width: 100%">
        <vxe-table-column title="案件名称" field="caseName" align="center"></vxe-table-column>
        <vxe-table-column title="详细信息" field="caseComment" align="center"></vxe-table-column>
        <vxe-table-column title="代理律师" align="center">
          <template v-slot="{row}">
            {{ lawyerData.find(i => i.id === row.lawyerId).lawyerName }}
          </template>
        </vxe-table-column>
        <vxe-table-column title="案件种类" align="center">
          <template v-slot="{row}">
            {{ caseTypeData.find(i => i.id === row.caseTypeId).caseTypeName || '' }}
          </template>
        </vxe-table-column>
        <vxe-table-column title="状态" align="center">
          <template v-slot="{row}">
            {{ caseStateData.find(i => i.id === row.caseStateId).caseStateName || '' }}
          </template>
        </vxe-table-column>
        <vxe-table-column title="操作" align="center">
          <template v-slot="{row}">
            <el-button @click="evaluationCase(row)" type="primary">评价</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
import {listMyCase} from "@/api/case";
import {listLawyer} from "@/api/Lawyer";
import {listCaseType} from "@/api/caseType";
import {listCaseState} from "@/api/caseState";

export default {
  name: "userHome",
  data() {
    return {
      caseData: [],
      lawyerData: [],
      caseTypeData: [],
      caseStateData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      listLawyer().then(res => {
        this.lawyerData = res.data.list
      })
      listCaseType().then(res => {
        this.caseTypeData = res.data.list
      })
      listCaseState().then(res => {
        this.caseStateData = res.data.list
      })
      listMyCase().then(res => {
        this.caseData = res.data.list
      })
    },
    evaluationCase(row) {
    }
  }
}
</script>

<style scoped lang="scss">
#userHome {
  .card-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
</style>
